<template>
  <div class="rf-searchresult-list">
    <div class="rf-storelocator-stores">
      <fieldset>
        <legend></legend>
        <div class="form-selector-group">
          <li
            class="selected form-selector"
            v-for="(shop, i) in RandomShop"
            :key="i.index"
            @click="changeStyledata(shop, i)"
          >
            <label
              class="form-selector-labelThis"
              @click="changeStyle"
              id="selectorThis"
            >
              <span class="row">
                <span class="storeitem-storeinfo">
                  <span class="form-selector-title">{{ shop.name }}</span>
                  <span class="form-label-small">{{ shop.area }}</span>
                  <span class="form-label-small">{{ shop.distant }}</span>
                </span>
                <span class="storeitem-availabilityinfo">
                  <span class="label-this">今天可取货</span>
                  <span class="label-small">店内取货</span>
                </span>
              </span>
            </label>
          </li>
        </div>
      </fieldset>
    </div>
  </div>
</template>

<script>
import bus from "../../../../../../../../bus";
export default {
  created() {
    const that = this;
    bus.$on("ChangeArr", function (data) {
      if (data == true) {
        that.changeArr(that.RandomShop);
        // 转换区域之后清除所有样式
        that.changeStyle(data);
      }
    });
    bus.$on("Shoparea", function (data) {
     if (data == true) {
        that.changeStyle(data);
        bus.$emit('InformationThis',that.RandomShop[0])
      }
      
    });
  },
  data() {
    return {
      RandomShop: [
        {
          name: "Apple 厦门新生活广场",
          area: "厦门",
          distant: "468.28 km",
          img: "https://rtlimages.apple.com/cmc/dieter/store/4_3/R644.png?resize=828:*&output-format=jpg",
          areaThis: "厦门市思明区嘉禾路 399 号",
          bigArea: "厦门, 福建",
          email: "361012",
          Phone: "4006171383",
        },
        {
          name: "Apple 南宁万象城",
          area: "南宁",
          distant: "581.89 km",
          img: "https://rtlimages.apple.com/cmc/dieter/store/4_3/R617.png?resize=828:*&output-format=jpg",
          areaThis: "南宁市青秀区民族大道 136 号",
          bigArea: "南宁, 广西壮族自治区",
          email: "530022",
          Phone: "4006171265",
        },
        {
          name: "Apple 珠江新城",
          area: "广州",
          distant: "97.92 km",
          img: "../ContextOneThis/img/R644.jpg",
        },
        { name: "Apple 武汉", area: "武汉", distant: "893.89 km" },
        { name: "Apple 泰禾广场", area: "福州", distant: "664.51 km" },
        { name: "Apple 南宁万象城", area: "南宁", distant: "581.89 km" },
        { name: "Apple 厦门新生活广场", area: "厦门", distant: "468.28 km" },
        { name: "Apple 南宁万象城", area: "南宁", distant: "581.89 km" },
      ],
      Newindex: [0, 0],
    };
  },
  methods: {
    // 改变随机改变数组排序
    changeArr(arr) {
      let result = [];
      while (arr.length) {
        let index = Math.floor(Math.random() * arr.length);
        result.push(arr[index]);
        arr.splice(index, 1);
      }
      this.RandomShop = result;
      return result;
    },
    changeStyledata(item, i) {
      // 将上次点击的数和这次点击的数都保存
      this.Newindex.splice(0, 1);
      this.Newindex.push(i);
    },
    changeStyle(e) {
      var selectorThis = document.getElementsByClassName(
        "form-selector-labelThis"
      );
      setTimeout(() => {
        selectorThis[this.Newindex[0]].classList.remove("selector-div");
        selectorThis[this.Newindex[1]].classList.add("selector-div");
        bus.$emit('InformationThis',this.RandomShop[this.Newindex[1]])
      }, 10);
      if (e == true) {
        // 清除所有样式
        setTimeout(() => {
          selectorThis[this.Newindex[1]].classList.remove("selector-div");
          selectorThis[0].classList.add("selector-div");
          this.Newindex = [0, 0];
        }, 12);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.rf-searchresult-list {
  background: #fbfbfd;
  .rf-storelocator-stores {
    width: 459px;
    border-right: 1px solid #d2d2d7;
    max-height: 580px;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding: 9px 40px;
    fieldset {
      border: 0;
      font-style: normal;
      .form-selector-group {
        li {
          display: inline-block;
          margin-top: 0;
          width: 379px;
          height: 118px;
          list-style: none;
          display: flex;
          flex-direction: row;
          label:focus {
            box-shadow: 0 0 0 4px #64affb;
          }
          .selector-div {
            border-color: #0071e3 !important;
            outline: none;
            border-width: 2px !important;
            padding: 14px;
            box-shadow: 0 0 0 4px #64affb;
          }
          .form-selector-labelThis {
            height: 102px !important;
            font-size: 17px;
            line-height: 1.23536;
            font-weight: 400;
            letter-spacing: -0.022em;
            font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica,
              Arial, sans-serif;
            width: 100%;
            height: auto;
            border-radius: 12px;
            border-width: 1px;
            border-style: solid;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            min-height: 4.88235rem;
            color: #1d1d1f;
            border-color: #d2d2d7;
            background-color: hsla(0, 0%, 100%, 0.8);

            .row {
              display: flex;
              flex-direction: row;
              // flex-wrap: wrap;
              width: 100%;
              pointer-events: none;
              .storeitem-storeinfo {
                display: flex;
                flex-direction: column;
                width: 246px;
                padding: 0;
                position: relative;
                align-self: center;
                text-align: left;
                max-width: 50%;
                .form-selector-title {
                  font-weight: 600;
                  font-size: 17px;
                }
                .form-label-small {
                  font-size: 14px;
                  font-weight: 400;
                  color: #5b5b5c;
                  margin-top: 3px;
                }
              }
              .storeitem-availabilityinfo {
                display: flex;
                width: 173.5px;
                flex-direction: column;
                justify-content: center;
                text-align: right;
                .label-small {
                  font-weight: 400;
                  font-size: 14px;
                  display: block;
                  margin-top: 0.53529rem;
                  color: #5b5b5c;
                }
                .label-this {
                  color: #008009;
                  font-size: 15px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>